<template>
  <div class="fit overflow-auto code-area">
    <div class="code-type">
      <AnyInput type="radio" :options="codeType" v-model="currentType" dense borderless></AnyInput>
    </div>
    <div v-if="currentType === '@step'">
      <StepBoard></StepBoard>
    </div>
    <q-card v-else dark class="q-pa-md">
      <div class="code-editor" style="padding-left: 18px;">
        <CodeEditor v-if="showCode" ref="codeEditor" v-model="currentContent"></CodeEditor>
      </div>
    </q-card>
  </div>
</template>

<script setup>
import AnyInput from '../components/AnyInput/index.vue'
import CodeEditor from '../components/CodeEditor/index.vue'
import {computed, onBeforeMount, onMounted, ref} from "vue"
import StepBoard from "./StepBoard.vue"
const props = defineProps({
  cfg: Object
})
const emit = defineEmits(['update:modelValue'])
const codeType = ref([
  {label: '计算属性', value: '@computed'},
  {label: '单步公式', value: '@eval'},
  {label: '完整函数', value: '@function'},
  {label: '函数设计器', value: '@step'},
])
const currentType = ref('@eval')
const currentContent = ref('')
const funcCfg = computed(() => {
  return {
    [currentType.value]: currentContent.value
  }
})
const codeEditor = ref()
const showCode = ref(false)
onMounted(() => {
  setTimeout(() => {
    showCode.value = true
  }, 500)
})

onBeforeMount(() => {
  for(let key in props.cfg) {
    if(codeType.value.find(item => item.value === key)) {
      currentType.value = key
      currentContent.value = props.cfg[key]
      return
    }
  }
})

defineExpose({funcCfg})
</script>

<style scoped>
.code-editor {
  height: 300px;
}
</style>
